<template>
	<div>
		<!-- 时间显示 -->
		<view v-if="showTime" 
		class="flex align-center justify-center pb-4 pt-2">
			<text class="font-sm text-light">{{showTime}}</text>
		</view>
		<!-- 系统消息 -->
		<!-- <view v-if="item.type === 'system'" ref="isremove"
		class="flex align-center justify-center pb-4 pt-1">
			<text class="font-sm text-light-muted">{{item.data}}</text>
		</view> -->
		<!-- 气泡 -->
		<view  class="px-2 flex align-start position-relative mb-3"
		:class="!isself ? 'justify-start' : 'justify-end'">
			<!-- 好友 -->
			<template v-if="!isself">
				<image @click="toUserDetail" :src="item.avatar" mode="" style="width: 72rpx;height: 72rpx;"></image>
				
				
			</template>
			
			<view class="flex flex-column">
				<div class="p-2 rounded" :class="labelClass" style="max-width:500rpx;" >
					<!-- 文字 -->
					<text v-if="item.type === 'text'" class="font-md">{{item.data}}</text>
				</div>
			</view>
			
			<!-- 本人 -->
			<template v-if="isself">
				<image  :src="item.avatar" mode="" style="width: 72rpx;height: 72rpx;"></image>
				
			</template>
		</view>
	</div>
</template>

<script>
	import $T from "@/common/js/time.js"
	
	
	export default {
		props: {
			item: Object,
			index:Number,
			// 上一条消息的时间戳
			pretime:[Number,String],
			shownickname:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				
			}
		},
		computed: {
			
			// 是否是本人
			isself() {
				// 获取本人id
				let id = 0
				return this.item.id === id 
			},
			// 显示的时间
			showTime(){
				return $T.getChatTime(this.item.create_time,this.pretime)
			},
			// 气泡的样式
			labelClass(){
				return this.isself ? 'mr-3 self' : 'noself ml-3'
			},
		},
		mounted() {
			
		},

		methods:{
			toUserDetail(){
				uni.navigateTo({
					url:'/pages/news/userDetail/userDetail'
				})
			}
		}
	}
</script>

<style scoped>
	.chat-left-icon{
		left: 80rpx;
	}
	.chat-right-icon{
		right: 80rpx;
	}
	.chat-animate{
		/* #ifndef APP-PLUS */
		opacity: 0;
		/* #endif */
	}
	.self{
		background-color: #CCF4F5;
		border-radius:4rpx 0px 4rpx 4rpx
	}
	.noself{
		background-color: #FFFFFF;
		border-radius:0rpx 4rpx 4rpx 4rpx
	}
</style>
